<template>
  <a-card
    v-if="isDetail ? loadData.length : true"
    v-loading="loading"
  >
    <title-name title="批注意见" />
    <div class="mb20p">
      <a-button
        v-if="!isDetail && !businessId"
        type="primary"
        class="mr20p"
        @click="add"
      >
        添加
      </a-button>
      <!--            <a-button>删除</a-button>-->
    </div>
    <a-table
      ref="table"
      bordered
      size="small"
      :columns="commentColumns"
      :data-source="loadData"
      :pagination="false"
      :scroll="{y: 300}"
    >
      <span
        slot="index"
        slot-scope="text, record, index"
      >{{ index + 1 }}</span>
      <span
        slot="fileInfoVO"
        slot-scope="text, record, index"
      >
        <a-popover
          v-if="record.fileInfoVO && record.fileInfoVO.fileName"
          :key="record.fileInfoVO.fileId"
          placement="top"
        >
          <template slot="content">
            <a
              style="white-space:nowrap"
              :href="$fileUrl(record.fileInfoVO)"
              target="_parent"
            >下载</a>
            <a-divider type="vertical" />
            <a
              :key="record.fileInfoVO.fileId"
              @click="$filePreview(record.fileInfoVO)"
            >查看</a>
          </template>
          <a>{{ record.fileInfoVO.fileName }} </a>
        </a-popover>
      </span>
      <!-- <span slot="sendStatus" slot-scope="text, record, index">
          {{ text ? '已推送' : '未推送' }}
      </span> -->
      <template
        slot="operation"
        slot-scope="text, record, index"
      >
        <div
          v-if="!isDetail"
          class="pub-table-list-action"
        >
          <template v-if="!businessId ">
            <template v-if="!record.sendStatus">
              <span
                v-if="record.isCreator"
                @click="editFeedback(record)"
              >编辑</span>
              <span
                v-if="record.isCreator"
                @click="handleDel(record.id)"
              >删除</span>
              <!-- <span @click="push(record.id)">推送</span> -->
            </template>
          </template>
          <!-- <span v-else @click="editFeedback(record)">反馈</span> -->
        </div>
      </template>
    </a-table>

    <a-modal
      title="批注意见"
      class="normal-modal page-detail"
      :confirm-loading="loading"
      :visible="visible"
      @cancel="visible = false"
      @ok="save"
    >
      <a-form-model
        ref="formRules"
        :model="form"
        :rules="formRules"
      >
        <a-row>
          <a-col span="24">
            <a-form-model-item
              label="提示内容"
              prop="tipsContent"
            >
              <b-textarea v-model="form.tipsContent" />
            </a-form-model-item>
          </a-col>
          <a-col span="8">
            <a-form-model-item
              label="提示人员"
              prop="personList"
            >
              <a-tag
                v-for="(item,index) of form.personList"
                :key="item.id"
                class="mb10p"
              >
                {{ item.name }}
              </a-tag>
              <a-tag
                style="background: #fff; borderStyle: dashed;"
                @click="selectPersonVisible = true"
              >
                <a-icon type="plus" />
                选择人员
              </a-tag>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
    <a-modal
      title="批注意见"
      class="normal-modal page-detail"
      :visible="feedbackVisible"
      @cancel="feedbackVisible = false"
      @ok="save"
    >
      <a-form-model
        ref="form2Rules"
        :model="form2"
        :rules="form2Rules"
      >
        <a-row>
          <a-col span="24">
            <a-form-model-item
              label="批注意见"
              prop="suggestion"
              class="requiredFormItem"
            >
              <BaseTextarea v-model="form2.suggestion" />
            </a-form-model-item>
          </a-col>
          <a-col span="24">
            <a-form-model-item label="上传附件">
              <b-upload
                business-code="LCM10"
                upload-type="single"
                :file-list.sync="form2.fileInfoVO"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>

      <template slot="footer">
        <a-button
          key="back"
          :disabled="!isCanCancel"
          @click="feedbackVisible = false"
        >
          取消
        </a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="btnLoading"
          @click="save"
        >
          提交
        </a-button>
      </template>
    </a-modal>
    <SelectPerson
      title="选择人员"
      mode="single"
      :list.sync="form.personList"
      :visible.sync="selectPersonVisible"
    />
  </a-card>
</template>

<script>
import SelectPerson from '@/components/Select/SelectPerson'
import BUpload from '@/components/BComponents/BUpload'
import {
  createByComments,
  deleteByComments,
  editByComments,
  findListByComments,
  riskSubmitSendComments
} from '@/api/legal'

export default {
  name: 'a' + Date.now(),
  components: {
    SelectPerson,
    BUpload
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    isDetail: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      businessId: this.$route.query.businessId,
      loading: false,
      visible: false,
      cantCancel: true,
      btnLoading: false,
      feedbackVisible: false,
      selectPersonVisible: false,
      commentColumns: [
        {
          title: '序号',
          dataIndex: 'branchCompany',
          align: 'center',
          scopedSlots: { customRender: 'index' },
          width: 80
        },
        // {
        //     title: '提示内容',
        //     dataIndex: 'tipsContent'
        // },
        // {
        //     title: '提示人',
        //     dataIndex: 'tipsUserName'
        // },
        {
          title: '批注意见',
          align: 'center',
          dataIndex: 'suggestion'
        },
        {
          title: '附件',
          dataIndex: 'fileInfoVO',
          width: 200,
          align: 'center',
          scopedSlots: { customRender: 'fileInfoVO' }
        },
        // {
        //     title: '推送状态',
        //     dataIndex: 'sendStatus',
        //     scopedSlots: { customRender: 'sendStatus' }
        // },
        {
          title: '批注人',
          width: 200,
          align: 'center',
          dataIndex: 'creatorName'
        },
        {
          title: '批注时间',
          width: 200,
          align: 'center',
          dataIndex: 'modifiedTime'
        }
      ],
      loadData: [],
      // loadData: params => {
      //     return findListByComments(Object.assign(params, { baseId: this.id }))
      // },
      form: {
        personList: [],
        suggestion: '',
        fileInfoVO: []
      },
      formRules: {
        tipsContent: { required: true, message: '提示内容不能为空', trigger: 'blur' },
        personList: { type: 'array', required: true, message: '提示人员不能为空', trigger: 'change' }
      },
      form2: {
        suggestion: '',
        fileInfoVO: []
      },
      form2Rules: {
        suggestion: { required: true, message: '批注意见不能为空', trigger: 'blur' }
        // fileInfoVO: { type: 'array', required: true, message: '上传附件不能为空', trigger: 'change' }
      },
      chooseRow: null
    }
  },
  created() {
    if (!this.isDetail) {
      this.commentColumns.push({
        title: '操作',
        width: 200,
        align: 'center',
        scopedSlots: { customRender: 'operation' }
      })
    }
    this.getTable()
  },
  computed: {
    isCanCancel() {
      return this.cantCancel
    }
  },
  watch: {
    // 'form2.fileInfoVO': {
    //   handler(val) {
    //     this.cantCancel = false;
    //   }
    // }
  },
  methods: {
    getTable() {
      findListByComments({ baseId: this.id }).then((res) => {
        if (res.code == 200) {
          this.loadData = res.data || []
        }
      })
    },
    add() {
      this.feedbackVisible = true
      this.$refs.form2Rules && this.$refs.form2Rules.resetFields()
    },
    listChange(list) {
      this.cantCancel = false
    },
    async push(id) {
      this.$confirm({
        title: '确认推送？',
        onOk: async () => {
          let res = await riskSubmitSendComments({ id })
          if (res.code === this.SUCCESS_CODE) {
            this.getTable(null, true)
          }
        }
      })
    },
    editComment(row) {
      this.form = this.$clone(row)
      this.form.personList = [{
        userId: row.tipsUserId,
        name: row.tipsUserName
      }]
      this.visible = true
    },
    editFeedback(row) {
      this.form2 = this.$clone(row)
      this.form2.fileInfoVO = row.fileInfoVO ? (row.fileInfoVO.id ? [row.fileInfoVO] : []) : []
      this.feedbackVisible = true
    },
    async save() {
      this.$refs.form2Rules.validate(async valid => {
        if (valid) {
          this.btnLoading = true
          let res
          let submitForm = this.$clone(this.form2)
          // submitForm.tipsUserId = this.form.personList[0].userId
          // submitForm.tipsUserName = this.form.personList[0].name
          submitForm.baseId = this.id
          submitForm.fileInfoVO = this.form2.fileInfoVO.length ? this.form2.fileInfoVO[0] : null
          if (this.form2.id) {
            res = await editByComments({}, submitForm)
          } else {
            res = await createByComments({}, submitForm)
          }
          this.btnLoading = false
          if (res.code === this.SUCCESS_CODE) {
            this.$noticeSuccess('提交成功')
            this.feedbackVisible = false
            this.getTable()
            this.form2 = {
              suggestion: '',
              fileInfoVO: []
            }
          }
        }
      })
    },
    handleDel(id) {
      let params = [id]
      this.$delList2(deleteByComments, () => {
        this.getTable()
      }, { ids: params })

    },
    async saveFeedback() {
      this.$refs.form2Rules.validate(async valid => {
        if (valid) {
          this.loading = true
          let submitForm = this.$clone(this.form2)
          submitForm.baseId = this.id
          submitForm.fileInfoVO = this.form2.fileInfoVO.length ? this.form2.fileInfoVO[0] : null
          let res = await editByComments({}, submitForm)
          this.loading = false
          if (res.code === this.SUCCESS_CODE) {
            this.$noticeSuccess('提交成功')
            this.feedbackVisible = false
            this.getTable()
            this.form2 = {}
          }
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
